<!-- 钱包 -->
<template>
	<view class="page-view">
		<u-navbar back-icon-color="#ffffff" :background="{background:'transparent'}" :border-bottom="false"></u-navbar>
		<view class="u-p-l-28 white u-m-b-50">
			<view class="font-bold u-font-40 ">我的钱包</view>
			<view class="u-m-t-10">出售服务收入和推广收入</view>
		</view>
		<view class="wallet-view">
			<view class="u-flex u-p-b-30 u-row-between u-border-bottom">
				<view class="u-flex-1">
					<view class="font-medium" style="font-size: 46rpx;">{{detail.money}}</view>
					<view class="u-tips-color">钱包余额</view>
				</view>
				<u-button type="primary" plain :customStyle="{backgroundColor:'#ffffff !important'}" shape="circle"
					hover-class="none" @click="toWithDraw">立即提现</u-button>
			</view>
			<view class="u-p-t-20">
				<text class="u-tips-color">未到账收入 </text> <text class="font-medium">{{detail.broken_money}}</text>
			</view>
		</view>
		<view class="wallet-view" @click="$u.route('/pages/subpage/wallet/bill')">
			<view class="u-flex">
				<image src="/static/icon/order_list.png" mode="aspectFill" style="width: 50rpx;height: 50rpx;"></image>
				<text class="black u-font-30 u-flex-1 u-m-l-20">账单明细</text>
				<u-icon name="arrow-right" color="#D9D9D9" size="24"></u-icon>
			</view>
		</view>
		<view class="wallet-view" @click="$u.route('/pages/subpage/wallet/receipt')">
			<view class="u-flex">
				<image src="/static/icon/receipt.png" mode="aspectFill" style="width: 50rpx;height: 50rpx;"></image>
				<text class="black u-font-30 u-flex-1 u-m-l-20">发票管理</text>
				<u-icon name="arrow-right" color="#D9D9D9" size="24"></u-icon>
			</view>
		</view>
		<view class="wallet-view" @click="$u.route('/pages/subpage/wallet/bankCards')">
			<view class="u-flex">
				<image src="/static/icon/cards.png" mode="aspectFill" style="width: 50rpx;height: 50rpx;"></image>
				<text class="black u-font-30 u-flex-1 u-m-l-20">银行卡管理</text>
				<u-icon name="arrow-right" color="#D9D9D9" size="24"></u-icon>
			</view>
		</view>

		<u-modal v-model="showModal" @confirm="confirm" ref="uModal" :async-close="true" title="提现" show-cancel-button
			:confirm-color="$appConfig.mainColor">
			<u-field v-model="money" label="提现金额" placeholder="请填写提现金额" type="digit" placeholder-style="color:#ddd">
			</u-field>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				showModal: false,
				money: ''
			}
		},
		onShow() {
			this.queryDetail()
		},
		methods: {
			queryDetail() {
				this.$u.api.walletDetail().then(res => {
					this.detail = res
				})
			},
			confirm() {
				if (this.$u.test.amount(this.money)) {
					this.$u.api.widthdraw({
						extract_type: 'weixin',
						money: this.money
					}).then(res => {
						this.showModal = false
						this.$u.toast('恭喜提现成功，已转入微信钱包账户')
						this.queryDetail()
					}).finally(() => {
						this.$refs.uModal.clearLoading()
					})
				} else {
					this.$refs.uModal.clearLoading()
					this.$u.toast('请输入正确的金额')
				}
			},
			toWithDraw() {
				this.$u.route('/pages/subpage/wallet/withdraw')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-view {
		background-image: url('https://bangbaguan.oss-cn-shanghai.aliyuncs.com/APP/wallet-bg.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 0 30rpx;
	}

	.wallet-view {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx 45rpx;
		margin-bottom: 30rpx;
	}
</style>